<template lang="html">
  <el-row class="home" :gutter="20">
    <!--span默认一共是24，这里占8 下面占16，所以这两个分隔栏所占的宽度 是1:2-->
    <el-col :span="8" style="margin-top: 20px">
      <!--shadow属性设置卡片阴影出现的时机-->
      <el-card shadow="hover">
        <div class="">
          <img :src="userImg" style="width: 120px" />
          <div class="">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间：<span>2019-10-20</span></p>
          <p>上次登录地点：<span>龙岩</span></p>
        </div>
      </el-card>
      <el-card style="height: 460px; margin-top: 20px">
         <el-card
      class="tq"
        shadow="hover"
        v-for="item in weather"
        :key="item.city"
      >
        <h4 style="font-size:30px">
          {{ item.city }}
        </h4>

        <div v-for="dt in we" :key="dt.forecast">
          <h5 v-for="items in dt[0]" :key="items">{{ items }} <br /></h5>
        </div>
          <h5>
          {{ item.ganmao }}
        </h5>
      </el-card>
      </el-card>
    </el-col>
    <el-col :span="16" style="margin-top: 20px" >
      <el-card
        shadow="hover"
        style="height: 540px"
      >


      </el-card>
      <div class="graph">
        <el-card shadow="hover" style="height: 260px">
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>

export default {
  components:{
   
  },
  data() {
    return {
      item: "",
      userImg: require("../assets/user.jpg"),
      weather: [],
      we: [],
      tableData: [{}],
      tableLabel: {},
    };
  },
  mounted() {
  },

  methods: {
    getTableData() {
      const that = this; //用that解决函数内部this指向问题 zhengkai.blog.csdn.net
      this.$axios
        .get("http://wthrcdn.etouch.cn/weather_mini?city=龙岩")
        .then(function (response) {
          console.log(that.weather);
          console.log(response.data.data);
          that.weather.push(response.data.data);
          console.log(that.weather);
          that.we.push(response.data.data.forecast)[0];
          console.log(that.we[0][0]);
        })
        .catch(function (error) {
          console.log(error);
        });
    },




  },

  //一进组件就会去请求后端接口 获取首页数据
  created() {
    this.getTableData();
    //  this.$axios
    //   .get("http://wthrcdn.etouch.cn/weather_mini?city=龙岩")
    //   .then(function(response) {
    //     console.log(response.data.data);
    //   })
    //   .catch(function(error) {
    //     console.log(error);
    //   });
  },
};
</script>
<style lang="css">
.tq{
  text-align: center;
}
.text {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

</style>